<script>
import { login } from "@/api/sysDict.js";

export default {
  name: "Login",
  data() {
    return {
      confirm_disabled: false,
      loginForm: {
        username: '',  // 字段名改为username
        password: ''
      },
      rules: {
        username: [    // 对应字段修改
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在3到20个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    confirm() {
      // 禁用登录按钮，防止重复提交
      this.confirm_disabled = true;
      // 验证表单
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          try {
            console.log(this.loginForm.username);
            console.log(this.loginForm.password);
            // 调用封装的登录请求函数
            const res = await login(this.loginForm.username,this.loginForm.password);
            console.log("已经发送求情");
            console.log(res);
            if (res.data.code === 200) {
              console.log(res.data);
              // 存储 JWT 令牌
              sessionStorage.setItem("token", res.data.data);
              // 显示登录成功消息
              this.$message.success('登录成功！');
              // 跳转到管理页面
              this.$router.replace('/admin');
            } else {
              // 显示登录失败消息
              this.$message.error(res.message || '登录失败，请检查用户名和密码');
            }
          } catch (error) {
            console.error('登录请求错误:', error);
            // 显示服务器连接异常消息
            this.$message.error('服务器连接异常');
          } finally {
            // 恢复登录按钮状态
            this.confirm_disabled = false;
          }
        } else {
          // 验证失败，恢复登录按钮状态
          this.confirm_disabled = false;
          return false;
        }
      });
    }
  }
}
</script>


<template>
  <div class="loginBody">
    <div style="width:97%;text-align:center;color:#1353dc;padding: 100px 100px 0 0;font-size:22px;">
      <h1>碳中和处理系统</h1>
    </div>

    <div class="loginDiv">
      <div class="login-content" >
        <h1 class="login-title">用户登录</h1>
        <el-form :model="loginForm" label-width="100px" :rules="rules" ref="loginForm" style="margin-left: 10px">
          <el-form-item label="用户名" prop="username">
            <el-input style="width: 200px" type="text" v-model="loginForm.username"
                      autocomplete="off" size="small"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input style="width: 200px" type="password" v-model="loginForm.password"
                      show-password autocomplete="off" size="small" @keyup.enter.native="confirm"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="confirm" :disabled="confirm_disabled">登 录</el-button>
            <router-link to="/register">
              <el-button type="primary" size="small" style="margin-left: 50px">注 册</el-button>
            </router-link>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>



<style scoped>
/* 保持原有样式不变 */
.loginBody {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('../assets/login.png');
  background-size: cover;
  overflow-x: hidden;
}

.loginDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 330px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-title {
  margin: 20px 0;
  text-align: center;
  color: #303133;
}

.login-content {
  padding: 25px;
}
</style>